<template>
  <a-modal
    v-model="visible"
    :title="type === 'add' ? '新增权限' : '修改权限'"
    :confirm-loading="confirmLoading"
    :footer="null"
    :destroyOnClose="true"
    @cancel="$emit('update:visible', false)"
    :width="660"
  >
    <div class="steps">
      <a-steps :current="current">
        <a-step v-for="item in steps" :key="item.title">
          <template slot="title">
            <span style="font-size: 14px;font-weight: 400;">{{ item.title }}</span>
          </template>
        </a-step>
      </a-steps>
    </div>
    <selectPeople :visible="show === 0" @upDate="upDate" />
    <selectPeople2
      :visible="show === 2"
      :permissionsJson="permissionsJson"
      :jurisdiction="jurisdiction"
      :type="type"
      @upDate="upDate"
      @upDate2="upDate2"
    />
    <permissions :visible="show === 1" :permissionsJson="permissionsJson" :type="type" @upDate="upDate" />
  </a-modal>
</template>

<script>
import selectPeople from "./selectPeople";
import selectPeople2 from "./selectPeople2";
import permissions from "./permissions";
// import { putDeliverRecords } from "./api";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: "add"
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    selectPeople,
    selectPeople2,
    permissions
  },
  watch: {
    visible(v) {
      if (v) {
        this.current = 0;
        this.permissionsJson = this.info;
        if (this.type === "add") {
          this.show = 0;
          this.steps = [
            {
              title: "选择员工"
            },
            {
              title: "配置权限"
            },
            {
              title: "权限范围"
            }
          ];
        }
        if (this.type === "edit") {
          this.show = 1;
          this.steps = [
            {
              title: "配置权限"
            },
            {
              title: "权限范围"
            }
          ];
        }
      }
    }
  },
  data() {
    return {
      show: 0,
      current: 0,
      confirmLoading: false,
      steps: [
        {
          title: "选择员工"
        },
        {
          title: "配置权限"
        },
        {
          title: "权限范围"
        }
      ],
      permissionsJson: {},
      jurisdiction: 0
    };
  },
  methods: {
    upDate(e, val) {
      this.show = e;
      if (this.type === "add") {
        this.current = e;
      }
      if (this.type === "edit") {
        this.current = e - 1;
      }
      if (e === 1 && val) {
        this.permissionsJson = val;
      }
      if (e === 2 && val) {
        this.jurisdiction = val;
      }
      if (e === "success") {
        this.$emit("update:visible", false);
        this.$emit("upDate");
      }
    },
    upDate2() {
      this.show = this.show - 1;
    }
  }
};
</script>

<style lang="scss" scoped>
.steps {
  height: 106px;
  box-shadow: 0px 4px 12px 0px rgba(106, 102, 246, 0.1);
  border-radius: 4px;
  padding: 36px 68px;
  box-sizing: border-box;
  margin-bottom: 24px;
}
</style>
